<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    //创建一个数组用于保存学期以及所对应的课程
    var courseList = new Array();
    courseList["第一学期"] = ['HTML','NodeJS','MySQL','MongoDB'];
    courseList["第二学期"] = ['JavaScript','JSP','Spring','Hibernate'];
    courseList["第三学期"] = ['Ajax','AVue','Vue','React'];   
    
    function changeTerm() {
        var selTerm = document.getElementById("selTerm").value;
        var selCourse = document.getElementById("selCourse");
        //如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
        selCourse.options.length = 0;
        for(var i in courseList) {
            if(i==selTerm){
            for(var j in courseList[i]) {
                selCourse.add(new Option(courseList[i][j]),null);
            }
         }
        }
    }
    // 当页面中首次加载的时候就要调用这个方法，将学期添加到第一个select中
    function allTerm() {
        var selTerm = document.getElementById("selTerm");
        for(var i in courseList) {
            //要将courseList中的学期添加到selTerm下拉列表框中
            selTerm.add(new Option(i),null);
        }
    }
    // window.onload = allTerm
    </script>
</head>
<body onload="allTerm()">
    <form id="form1" name="form1" action="" method="post">
        <table border="0" align="center">
            <tr>
                <td>学期</td>
                <td>
                    <select id="selTerm" onchange="changeTerm()">
                        <option>请选择学期</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>课程</td>
                <td>
                    <select id="selCourse">
                        <option>请选择学期所对应的课程</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>